<template>
  <div class="page">
    <HeaderBar :fixed="true" :theme="theme" :active="'industry'"/>
    <div class="page-main">
      <div class="banner-box">
        <div class="banner-swiper swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in bannerList" :key="index">
              <div class="banner">
                <img :src="item.photo" class="banner-img fit-img" alt="">
                <div class="icon-video hv-opacity" v-if="item.video" @click="showVideo(item.video, item.photo)">
                  <img src="@/assets/images/icon_play.svg" class="icon-play" alt="">
                  <span class="label">点击播放视频</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="banner-tabs">
          <div class="banner-tab" :class="{ 'active': curBannerId == item.id }" v-for="(item, index) in bannerList" :key="index" @mouseover="changeTab(item.id, index)" @click="changeContent(item.id, index)">
            <div class="icon">
              <img oncontextmenu="return false" :src="item.icon" class="contain-img">
            </div>
            <div class="tab-title">{{ item.title }}</div>
            <div class="tab-desc">{{ item.titles }}</div>
          </div>
          <div class="thin-tab hv-opacity" @click="showMore">
            <div class="thin-icon">
              <img oncontextmenu="return false" src="@/assets/images/icon_more.svg" class="icon-more" alt="">
            </div>
            <div class="label">探索更多</div>
          </div>
        </div>
      </div>
      <div class="content-main">
        <div class="intro-container" v-if="curInfo.is_sign1 == 1">
          <div class="intro-box">
            <div class="intro-left">
              <div class="intro-info">
                <div class="intro-title" v-html="curInfo.strategy_title"></div>
                <div class="intro-desc" v-html="curInfo.strategy_titles"></div>
              </div>
              <div class="intro-tags">
                <div class="intro-tag" v-for="(item, index) in curInfo.tags" :key="index">
                  <div class="key f-number">{{ item.titles }}<span class="unit" v-if="item.unit">+</span></div>
                  <div class="title">{{ item.title }}</div>
                </div>
              </div>
            </div>
            <div class="intro-right hv-scale">
              <img oncontextmenu="return false" :src="curInfo.strategy_photo" class="photo fit-img">
            </div>
          </div>
        </div>
        
        <div class="mk-box" v-if="curInfo.is_sign2 == 1">
          <div class="mk-info">
            <div class="mk-title">{{ curInfo.market_title }}</div>
            <div class="mk-desc">{{ curInfo.market_content }}</div>
          </div>
          <div class="mk-swiper-box">
            <div class="mk-swiper swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide" :class="{ 'active': curMarketId == item.id }" v-for="(item, index) in marketList" :key="index" @click="changeMkTab(item.id, index)">
                  <a :href="item.url || 'javascript:;'" target="_blank" class="mk-card" :class="{ 'active': curMarketId == item.id }" >
                    <div class="photo">
                      <img oncontextmenu="return false" :src="item.photo" class="fit-img">
                    </div>
                    <div class="mk-words">
                      <div class="title text-nowrap">{{ item.title }}</div>
                      <div class="desc text-nowrap">{{ item.titles }}</div>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="mk-box-ft flex-between" v-show="marketList.length > 3">
            <div class="mk-bar"></div>
            <div class="mk-nav">
              <div class="prev-btn flex-center">
                <i class="iconfont icon-arrow_left"></i>
              </div>
              <div class="next-btn flex-center">
                <i class="iconfont icon-arrow"></i>
              </div>
            </div>
          </div>
        </div>

        <div class="pro-box" v-if="curInfo.is_sign3 == 1">
          <div class="pro-left">
            <div class="pro-photo" :class="{'active': curProIndex == index}" v-for="(item, index) in proList" :key="index">
              <img oncontextmenu="return false" :src="item.photo2" class="fit-img">
            </div>
          </div>
          <div class="pro-right">
            <div class="pro-main">
              <div class="pro-main-title">{{ curInfo.kit_title }}</div>
              <div class="pro-main-desc">{{ curInfo.kit_content }}</div>
              <div class="pro-swiper-box">
                <div class="pro-swiper swiper-container">
                  <div class="swiper-wrapper" v-if="proList.length > 1">
                    <div class="swiper-slide" v-for="(item, index) in proList" :key="index">
                      <div class="pro-card">
                        <div class="pro-card-photo">
                          <img oncontextmenu="return false" :src="item.photo" alt="" class="contain-img">
                        </div>
                        <div class="pro-label">{{ item.title }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="pro-dots" v-if="proList.length > 1">
                  <div class="pro-dot" v-for="(item, index) in proList" :key="index" :class="curProIndex == index ? 'active' : ''" @click="changeProTab(index)"></div>
                </div>
                <div class="pro-prev-btn flex-center">
                  <i class="iconfont icon-arrow_left"></i>
                </div>
                <div class="pro-next-btn flex-center">
                  <i class="iconfont icon-arrow"></i>
                </div>
              </div>
            </div>
            
          </div>
        </div>
        <div class="line-box">
          <div class="line-box-item">
            <img src="https://ar.foxech.com/uploads/20250210/8e61181e80f5262ffe80af34ac04252a.jpg" class="fit-img photo" alt="">
            <div class="line-inner">
              <div class="title">安德国内产品线</div>
              <div class="desc">设计和生产一体服务，嵌入式厨电领域成为世界工厂</div>
              <div class="btn flex-center hv-opacity">
                <span class="label">探索产品</span>
                <i class="iconfont icon-arrow"></i>
              </div>
            </div>
          </div>
          <div class="line-box-item">
            <img src="https://ar.foxech.com/uploads/20250210/8e61181e80f5262ffe80af34ac04252a.jpg" class="fit-img photo" alt="">
            <div class="line-inner">
              <div class="title">安德国内产品线</div>
              <div class="desc">设计和生产一体服务，嵌入式厨电领域成为世界工厂</div>
              <div class="btn flex-center hv-opacity">
                <span class="label">探索产品</span>
                <i class="iconfont icon-arrow"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FooterBar />
  </div>
  <VideoPopup ref="videoPopupRef" />
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { formatText, hideLoading, changeSearchParams } from '../../utils/utils'
import Swiper from 'swiper'
import { Mousewheel, EffectFade, Autoplay, Navigation, Scrollbar } from 'swiper/modules'
import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/effect-fade';
import 'swiper/scss/scrollbar';
import VueScrollTo from 'vue-scrollto'
import { getIndustryBannerList, getIndustryHomeInfo, getMarketingList, getProductList } from '@/api/industry' 
import { getUrlParams } from '@/utils/utils';

import VideoPopup from '@/components/VideoPopup/index.vue'
import HeaderBar from '@/components/HeaderBar/index.vue'
import FooterBar from '@/components/FooterBar/index.vue'

let bannerSwiper, mkSwiper, proSwiper
const theme = ref('transparent')
const info = ref({})
const curInfo = ref({})
const curBannerIndex = ref(0)
const bannerList = ref([])
const curBannerId = ref(0)
const marketList = ref([])
const proList = ref([])
const curProIndex = ref(0)
const curMarketId = ref(0)
const videoPopupRef = ref(null)

onMounted(() => {  
  loadBannerList()
  // loadData()
  window.addEventListener('scroll', (event) => {
    const scrollTop = window.scrollY
    if (scrollTop > 100) {
      theme.value = 'white'
    } else {
      theme.value = 'transparent'
    }
  });
});

const loadData = (type) => {
  getProductList({industry_id: curBannerId.value}).then(res => {
    proList.value = res.data
    setTimeout(() => {
      initProSwiper(type)
    }, 200)
  })

  getMarketingList({industry_id: curBannerId.value}).then(res => {
    marketList.value = res.data
    curMarketId.value = res.data[0].id
    setTimeout(() => {
      initMarketingSwiper(type)
    })
  })
}

const loadBannerList = () => {
  getIndustryBannerList().then(res => {
    bannerList.value = res.data.map(el => {
      el.strategy_title = formatText(el.strategy_title)
      el.strategy_titles = formatText(el.strategy_titles)
      if (el.strategy_data) {
        el.strategy_data.forEach(item => {
          if (item.titles.indexOf('+') >= 0) {
            item.titles = item.titles.split('+')[0]
            item.unit = '+'
          }
        })
        el.tags = el.strategy_data
      } else {
        el.tags = []
      }
      return el
    })
    if (getUrlParams('type')) {
      curBannerId.value = getUrlParams('type')
      curBannerIndex.value = bannerList.value.findIndex(el => el.id == getUrlParams('type'))
      curInfo.value = bannerList.value[curBannerIndex.value]
    } else {
      curBannerId.value = res.data[0].id
      curBannerIndex.value = 0
      curInfo.value = res.data[0]
    }
    initBannerSwiper()
  })
};

const initBannerSwiper = () => {
  bannerSwiper = new Swiper('.banner-swiper', {
    modules: [Mousewheel, EffectFade, Autoplay],
    mousewheel: false,
    effect: 'fade',
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    on: {
      init: swiper => {
        swiper.slideTo(curBannerIndex.value)
        loadData('init')
        window.scroll(0, 0)
        hideLoading()
      },
      slideChangeTransitionStart: swiper => {
        curBannerId.value = bannerList.value[swiper.realIndex].id
      },
    }
  })
};

const changeContent = (id, index) => {
  reloadData(index)
  changeSearchParams({type: id})
  showMore()
}

const showMore = () => {
  VueScrollTo.scrollTo('.content-main', 300, {
    container: 'body',
    offset: 0,
    easing: 'ease-in',
    force: true,
    cancelable: true,
    x: false,
    y: true
  })
}

const changeProTab = index => {
  proSwiper.slideTo(index)
}
const reloadData = (index) => {
  curBannerId.value = bannerList.value[index].id
  curBannerIndex.value = index
  curInfo.value = bannerList.value[index]
  loadData()
  // marketList.value
  // proList
  // curProIndex
  // curMarketId
}

const initMarketingSwiper = (type) => {
  if (!mkSwiper && marketList.value.length > 0) {
    mkSwiper = new Swiper('.mk-swiper', {
      modules: [Mousewheel, Navigation, Scrollbar],
      mousewheel: false,
      slidesPerView: 'auto',
      spaceBetween: 10,
      // slidesOffsetBefore: '4.2%',
      // slidesOffsetAfter: '4.2%',
      navigation: {
        nextEl: '.next-btn',
        prevEl: '.prev-btn',
      },
      scrollbar: {
        el: '.mk-bar',
        draggable: true,
        dragSize: 100
      },
      on: {
        slideChangeTransitionStart: swiper => {
          curMarketId.value = marketList.value[swiper.realIndex].id
        },
      }
    })
  } else {
    mkSwiper.update()
  }
};

const initProSwiper = (type) => {
  if (proSwiper && proList.length > 0) {
    proSwiper.update()
  } else {
    proSwiper = new Swiper('.pro-swiper', {
      modules: [Navigation],
      navigation: {
        nextEl: '.pro-next-btn',
        prevEl: '.pro-prev-btn',
      },
      loop: true,
      on: {
        slideChangeTransitionStart: swiper => {
          curProIndex.value = swiper.realIndex
          console.log(swiper.realIndex)
        },
        slideChange: swiper => {
          console.log(swiper.realIndex)
        }
      }
    })
  }
  
};

const changeTab = (id, index) => {
  curBannerId.value = id
  curBannerIndex.value = index
  bannerSwiper.slideTo(index)
};

const changeMkTab = (id, index) => {
  curMarketId.value = id
};

const showVideo = (videoUrl, posterUrl) => {
  videoPopupRef.value.show(videoUrl, posterUrl)
};
</script>

<style lang="scss">
@use '@/assets/style/common.scss';
.page {
  width: 100%;
  height: 100%;
}
.banner-box {
  width: 100%;
  height: 100vh;
  position: relative;
}
.banner {
  width: 100%;
  height: 100vh;
  position: relative;
}
.banner-img {
  position: relative;
  z-index: 1;
}
.icon-video {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 30;
  .icon-play {
    width: 4.0625rem /* 65/16 */;
    height: 4.0625rem /* 65/16 */;
    margin-bottom: 1.25rem /* 20/16 */;
  }
  .label {
    font-size: 1.375rem /* 22/16 */;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
  }
}
.banner-tabs {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 8.125rem /* 130/16 */;
  width: auto;
  display: flex;
  z-index: 10;
  background: rgba(15, 29, 44, 0.4);
  backdrop-filter: blur(6.25rem /* 100/16 */);
}
.thin-tab {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 10.125rem /* 162/16 */;
  height: 8.125rem /* 130/16 */;
  transition: all .3s ease-in-out;
  padding-top: 2.4375rem /* 39/16 */;
  position: relative;
  cursor: pointer;
  .thin-icon {
    width: 1.5rem /* 24/16 */;
    img {
      width: 100%;
    }
  }
  .label {
    margin-top: .75rem /* 12/16 */;
    font-size: .875rem /* 14/16 */;
    line-height: 1;
    letter-spacing: .02em;
    color: #FFFFFF;
    transition: all .3s ease-in-out;
    top: 0;
  }
}
.banner-tab {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 14.375rem /* 230/16 */;
  transition: all .3s ease-in-out;
  height: 8.125rem /* 130/16 */;
  padding-top: 1.25rem /* 20/16 */;
  position: relative;
  cursor: pointer;
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 8.125rem /* 130/16 */;
    opacity: 0;
    background: #E50012;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    transition: all .3s ease-in-out;
  }
  &.active {
    &::after {
      opacity: 1;
      height: 9.6875rem /* 155/16 */
    } 
    .icon {
      width: 2.625rem /* 42/16 */;
      height: 2.625rem /* 42/16 */;
      top: -1.4375rem /* 23/16 */
    }
    .tab-title {
      font-size: 1.25rem /* 20/16 */;
      line-height: 1;
      top: -1.4375rem /* 23/16 */
    }
    .tab-desc {
      top: -1.1875rem /* 19/16 */
    }
  }
  .icon {
    width: 2.125rem /* 34/16 */;
    height: 2.125rem /* 34/16 */;
    position: relative;
    z-index: 3;
    transition: all .3s ease-in-out;
    top: 0;
  }
  .tab-title {
    margin-top: .75rem /* 12/16 */;
    font-size: 1rem /* 16/16 */;
    line-height: 1.125rem /* 18/16 */;
    letter-spacing: .02em;
    color: #FFFFFF;
    font-weight: 500;
    position: relative;
    z-index: 3;
    transition: all .3s ease-in-out;
    top: 0;
  }
  .tab-desc {
    margin-top: .75rem /* 12/16 */;
    font-size: .8125rem /* 13/16 */;
    line-height: 1;
    position: relative;
    z-index: 3;
    transition: all .3s ease-in-out;
    color: rgba(255,255,255,.6);
    top: 0;
  }
}
.intro-container {
  padding: 5rem /* 80/16 */ 0;
  background: url(@/assets/images/intro_bg.png) no-repeat right center / cover;
}
.intro-box {
  margin: 0 auto;
  width: 100rem /* 1600/16 */;
  max-width: 92%;
  display: flex;
  justify-content: space-between;
  position: relative;
  // &::after {
  //   content: '';
  //   display: block;
  //   width: 32vw;
  //   height: 100%;
  //   position: absolute;
  //   right: 0;
  //   top: 0;
  //   background: #FDFAF7;
  //   z-index: 1;
  // }
}
.mk-nav {
  display: flex;
  align-items: center;
  .next-btn, .prev-btn {
    width: 3.125rem /* 50/16 */;
    height: 3.125rem /* 50/16 */;
    border-radius: 50%;
    background: #F2F2F2;
    cursor: pointer;
    &:hover {
      background: #E50012;
      .iconfont {
        color: #FFFFFF;
      }
    }
    .iconfont {
      font-size: 1.125rem /* 18/16 */;
      color: #000000;
    }
  }
  .next-btn {
    margin-left: 1.125rem /* 18/16 */;
  }
}
.intro-info {
  padding-top: 4.375rem /* 70/16 */;
}
.intro-left {
  width: 45%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .intro-title {
    font-size: 2.8125rem /* 45/16 */;
    line-height: 3.75rem /* 60/16 */;
    width: 36.875rem /* 590/16 */;
    max-width: 100%;
    color: #000000;
    font-weight: 500;
  }
  .intro-desc {
    font-size: 1.0625rem /* 17/16 */;
    line-height: 2.375rem /* 38/16 */;
    width: 36.875rem /* 590/16 */;
    max-width: 100%;
    color: #595757;
    margin-top: 1.25rem /* 20/16 */;
    text-align: justify;
  }
}
.intro-tags {
  width: 100%;
  display: flex;
  align-items: center;
  .intro-tag {
    width: 12.5rem /* 200/16 */;
    padding: 1.5rem /* 24/16 */;
    background: #F2F2F2;
    border-radius: 4px;
    .key {
      font-size: 2.625rem /* 42/16 */;
      font-weight: 500;
      line-height: 2.625rem /* 42/16 */;
      .unit {
        font-size: 1.875rem /* 30/16 */;
      }
    }
    .title {
      margin-top: 1.125rem /* 18/16 */;
      color: #595757;
      line-height: 1;
    }
    &+.intro-tag {
      margin-left: 1.125rem /* 18/16 */
    }
  }
}
.intro-right {
  width: 51.25%;
  height: 52.5rem /* 840/16 */;
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 2px;
}
.mk-box {
  padding: 5.625rem /* 90/16 */ 0 4.125rem /* 66/16 */;
  background: #FFFFFF;
  .mk-info {
    display: flex;
    margin: 0 auto;
    width: 91.6vw;
    justify-content: space-between;
    .mk-title {
      font-size: 2.8125rem /* 45/16 */;
      font-weight: 500;
      letter-spacing: .02em;
      color: #000000;
    }
    .mk-desc {
      font-size: 1.0625rem /* 17/16 */;
      line-height: 2.25rem /* 36/16 */;
      color: #595757;
      width: 65rem /* 1040/16 */;
    }
  }
}
.mk-swiper-box {
  margin-top: 3.4375rem /* 55/16 */;
}
.mk-swiper {
  width: 100%;
  height: 30.2vw;
  .swiper-slide {
    width: 22.4vw;
    height: 30.2vw;
    transition: all .5s ease-in-out;
    &:first-child {
      margin-left: 4.2vw;
    }
    &:last-child {
      margin-right: 4.2vw;
    }
    &.active {
      width: 33.33vw;
    }
  }
  .mk-card {
    width: 100%;
    height: 30.2vw;
    transition: all .5s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    .photo {
      width: 100%;
      height: 25.2vw;
    }
    &.active {
      width: 33.33vw;
    }
    .mk-words {
      margin-top: .3125rem /* 5/16 */;
      flex: 1;
      height: 0;
      background: #F0F0F0;
      padding: 1vw 1.3vw 0;
      .title {
        font-size: 1.125rem /* 18/16 */;
        line-height: 1;
        color: #000000;
        font-weight: bold
      }
      .desc {
        margin-top: .875rem /* 14/16 */;
        line-height: 1.375rem /* 22/16 */;
        color: #595757
      }
    }
  }
}
.mk-box-ft {
  margin: 3.4375rem /* 55/16 */ auto 0;
  width: 91.6vw;
}
.mk-bar {
  width: 27.1875rem /* 435/16 */;
  height: 2px;
  background: #F0F0F0;
  .swiper-scrollbar-drag {
    background: #E50012;
    height: 2px;
  }
}
.pro-box {
  height: 52.08vw;
  width: 100%;
  display: flex;
  background: url(@/assets/images/pro_bg.jpg) no-repeat right center/cover;
  .pro-left {
    width: 50%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .pro-right {
    width: 50%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
}
.pro-photo {
  height: 52.08vw;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all .3s ease-in-out;
  z-index: 10;
  &.active {
    opacity: 1;
  }
}
.pro-main {
  width: 100%;
  padding-top: 7.8125vw;
  display: flex;
  align-items: center;
  flex-direction: column;
  .pro-main-title {
    font-size: 2.8125rem /* 45/16 */;
    line-height: 1;
    font-weight: 500;
    color: #000000;
    letter-spacing: .02em;
  }
  .pro-main-desc {
    margin-top: 1.375rem /* 22/16 */;
    font-size: 1.0625rem /* 17/16 */;
    line-height: 2.25rem /* 36/16 */;
    color: #595757;
    width: 50%;
    text-align: center;
  }
}
.pro-next-btn, .pro-prev-btn {
  width: 3.125rem /* 50/16 */;
  height: 3.125rem /* 50/16 */;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
  position: absolute;
  z-index: 10;
  &:hover {
    background: #E50012;
    .iconfont {
      color: #FFFFFF;
    }
  }
  .iconfont {
    font-size: 1.125rem /* 18/16 */;
    color: #000000;
  }
}
.pro-next-btn {
  right: 8.33vw;
  top: 8.33vw;
}
.pro-prev-btn {
  left: 8.33vw;
  top: 8.33vw;
}
.pro-swiper-box {
  margin: 3.5rem /* 56/16 */ auto 0;
  width: 100%;
  position: relative;
  .pro-swiper {
    width: 100%;
    height: 28.125rem /* 450/16 */;
  }
}
.pro-card {
  width: 100%;
  height: 28.125rem /* 450/16 */;
  .pro-card-photo {
    width: 23.75rem /* 380/16 */;
    height: 23.75rem /* 380/16 */;
    margin: 0 auto;
  }
  .pro-label {
    width: 50%;
    margin: 1.25rem /* 20/16 */ auto 0;
    text-align: center;
    color: #000000;
    letter-spacing: .02em;
    font-weight: 500;
  }
}
.pro-dots {
  margin-top: 7.75rem /* 124/16 */;
  display: flex;
  align-items: center;
  justify-content: center;
  .pro-dot {
    width: .5rem /* 8/16 */;
    height: .1875rem /* 3/16 */;
    margin: 0 .1875rem /* 3/16 */;
    background: #D3D3D3;
    transition: all .3s ease-in-out;
    cursor: pointer;
    &.active {
      width: .875rem /* 14/16 */;
      background: #E50012;
    }
  }
}
.line-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 52.08vw;
  position: relative;
  z-index: 10;
}
.line-box-item {
  flex: 1;
  height: 52.08vw;
  position: relative;
  .line-inner {
    position: absolute;
    bottom: 4.6875rem /* 75/16 */;
    left: 0;
    padding: 0 5rem /* 80/16 */;
    z-index: 10;
    .title {
      font-size: 2.1875rem /* 35/16 */;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.02em;
      color: #FFFFFF;
    }
    .desc {
      margin-top: 1.25rem /* 20/16 */;
      font-family: 1.125rem /* 18/16 */;
      line-height: 2.375rem /* 38/16 */;
      color: rgba(255,255,255,.85);
      letter-spacing: 0.03em;
    }
    .btn {
      margin-top: 2.25rem /* 36/16 */;
      width: 8.4375rem /* 135/16 */;
      height: 3.125rem /* 50/16 */;
      background: #E50012;
      border-radius: 2px;
      .label {
        color: #FFFFFF;
        font-size: .9375rem /* 15/16 */;
        line-height: 1;
      }
      .icon-arrow {
        margin-left: .1875rem /* 3/16 */;
        font-size: 1rem /* 16/16 */;
        line-height: 1;
        color: #FFFFFF;
      }
    }
  }
}
</style> 